<template>
	<el-card class="box-card">
		<div slot="header" class="clearfix">
			<span>更换头像</span>
		</div>
		<div>

			<!-- 图片，用来展示用户选择的头像 -->
			<img :src="avatar" alt="" class="preview" v-if="avatar" />
			<img src="../../../assets/images/avatar.jpg" alt="" class="preview" v-else />

			<!-- 按钮区域 -->
			<div class="btn-box">
				<input type="file" accept="image/*" style="display: none;" ref="ipFile" @change="onFileChange" />
				<el-button type="primary" icon="el-icon-plus" @click="chooseImg">选择图片</el-button>
				<el-button type="success" icon="el-icon-upload" :disabled="avatar === ''" @click="uploadAvatar">上传头像
				</el-button>
			</div>
		</div>
	</el-card>
</template>

<script>
	export default {
		name: 'UserAvatar',
		data() {
			return {
				avatar: []
			}
		},
		methods: {
			// 上传用户头像
			async uploadAvatar() {
				const {
					data: res
				} = await this.$http.patch('/my/update/avatar', {
					avatar: this.avatar
				})
				if (res.code !== 0) return this.$message.error('上传头像失败！')
				this.$message.success('上传头像成功！')
				this.avatar = ''
				this.$store.dispatch('initUserInfo')
			},
			onFileChange(e) {
				console.log(e);
				// 1. 获取文件上传的列表
				const files = e.target.files;
				console.log(files);
				// 2. 判断有没有选中图片
				if (files.length !== 0) {
					// 3. 选择了图片
					// 3.1 创建FileReader对象
					var reader = new FileReader();
					// 3.2 调用readAsDataURL函数读取文件内容
					reader.readAsDataURL(files[0]);
					// 3.3 监听onload事件，读取完成触发回调函数
					reader.addEventListener("load", () => {
						// 3.4 获取到base64字符串，存储到data中
						this.avatar = reader.result;
					});
				} else {
					// 4.没有选择图片
					this.avatar = "";
				}
			},
			chooseImg() {
				// 模拟点击行为
				this.$refs.ipFile.click()
			},
		}
	}
</script>

<style lang="less" scoped>
	.btn-box {
		margin-top: 10px;
	}

	.preview {
		object-fit: cover;
		width: 350px;
		height: 350px;
	}
</style>
